<template>
  <div class="device-base-info">
    <div class="device-info-text">
      <h3 class="device-subtitle">基本信息</h3>
      <ul class="device-details">
        <li>
          <p class="item-label"><span>设</span><span>备</span><span>名</span><span>称</span></p>
          <p class="item-value">{{detailsInfo.fcfName}}</p>
        </li>
        <li>
          <p class="item-label"><span>设</span><span>备</span><span>地</span><span>址</span></p>
          <p class="item-value location-text">{{detailsInfo.location}}</p>
        </li>
        <li>
          <p class="item-label"><span>复</span><span>位</span><span>方</span><span>式</span></p>
          <p class="item-value">{{mapResetMode(detailsInfo.resetMode)}}</p>
        </li>
        <li>
          <p class="item-label"><span>所</span><span>属</span><span>系</span><span>统</span></p>
          <p class="item-value">{{ detailsInfo.systemName}}</p>
        </li>
        <li>
          <p class="item-label"><span>设</span><span>备</span><span>类</span><span>别</span></p>
          <p class="item-value">{{detailsInfo.categoryName}}</p>
        </li>
        <li>
          <p class="item-label"><span>厂</span><span>家</span></p>
          <p class="item-value">{{detailsInfo.producerName}}</p>
        </li>
        <li>
          <p class="item-label"><span>入</span><span>网</span><span>时</span><span>间</span></p>
          <p class="item-value">{{detailsInfo.facsCreateTime}}</p>
        </li>
        <li>
          <p class="item-label"><span>所</span><span>属</span><span>单</span><span>位</span></p>
          <p class="item-value">{{detailsInfo.organizationName}}</p>
        </li>
        <li>
          <p class="item-label"><span>安</span><span>全</span><span>责</span><span>任</span><span>人</span></p>
          <p class="item-value">{{detailsInfo.safetyPerson}}<span class="people-phone">{{detailsInfo.safetyPersonPhone}}</span></p>
        </li>
        <li>
          <p class="item-label"><span>安</span><span>全</span><span>管</span><span>理</span><span>人</span></p>
          <p class="item-value">{{detailsInfo.managerPerson}}<span class="people-phone">{{detailsInfo.managerPersonPhone}}</span></p>
        </li>
      </ul>
      <div class="last-time">
        上次发生警情时间
        <span>{{detailsInfo.lastRecordTime || '-'}}</span>
      </div>
    </div>
    <div class="device-info-items">
      <ul>
        <li @click="lookVideo">
          <img src="../../../../../assets/images/detailPage/icon-video.png" class="link-icon" alt />
          <p class="link-name">视频</p>
        </li>
        <li @click="lookLayeredMap">
          <img src="../../../../../assets/images/detailPage/icon-layered.png" class="link-icon" alt />
          <p class="link-name">分层图</p>
        </li>
        <li @click="findMapLocation">
          <img src="../../../../../assets/images/detailPage/icon-adress.png" class="link-icon" alt />
          <p class="link-name">定位</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getMarkDetail } from '@/api/markInfo3d'
import { getBsFacsLayeredPic } from '@/api/detectorMonitor'

export default {
  name: "BaseInfo",
  props: {
    deviceInfo: {
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      detailsInfo:{}
    };
  },
  created() {
    this.$Ctl.loading(1, 10000);
  },
  methods: {
    // 查看视频 
    lookVideo() {
      let that = this
      if(!that.$Ctl.getClickEnabel(1)) return
      getMarkDetail({
            id: that.deviceInfo.fcfId,	 //消防设施编码
            dType: that.$store.state.currentMapType == 4 ? 2 : localStorage.getItem("ilinkBs_currentMapType"),
            markIdType:1
        }).then(res => {
            that.$Ctl.showVideoClient(null, that.detailsInfo.videoList,(res.data && res.data.data && res.data.data.markId)?res.data.data.markId:'');
        })
    },
    // 查看分层图 
    lookLayeredMap() {
      let that = this
      that.$Ctl.loading(1, 10000)
      // 获取分层图数据
      getBsFacsLayeredPic({
        fcfId: that.deviceInfo.fcfId
      }).then(res => {
          if(res.status === 200) {
            // 判断是否存在分层图
            if(res.data.layeredGraphUrl) {
              that.$emit('showOrCloseLayerMap', res.data)
            } else {
              that.$Ctl.message('暂无分层图！')
            }
          }
          that.$Ctl.loading(0)
      })
    },
    // 定位 
    findMapLocation() {
      let that = this
      that.$Ctl.addRoutePage('EquipmentList',{
        fbsId: "",
        fcfId: that.detailsInfo.fcfId,
        name: that.detailsInfo.fcfName,
        orgId: that.detailsInfo.organizationId,
        systemId: ""
      })
      that.$Ctl.fixedPosition_fc( that.deviceInfo.fcfId ,1)
    },
    // 映射复位方式
    mapResetMode(code) {
      let mapList = {
        '0': '自复位',
        '1': '处理后复位'
      }
      return mapList[code] || '-'
    }
  },
  watch: {
    deviceInfo(val, oldVal) {
      let that = this
      if(val) {
        that.detailsInfo = val
        that.$Ctl.loading(0)
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.device-base-info {
  .device-info-text {
    height: calc(85% - 10px);
    border: 1px solid rgba(32,165,244,.3);
    border-radius: 4px;
    padding: 25px 35px;
    overflow: auto;
    .device-subtitle {
      margin-left: 10px;
      width: 200px;
      height: 26px;
      line-height: 26px;
      font-size: 20px;
      color: #55abf3;
      font-weight: bold;
      background: url("../../../../../assets/images/detailPage/icon-info.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      letter-spacing: 3px;
    }
    .device-details {
      margin-top: 40px;
      font-size: 20px;
      li {
        margin-bottom: 10px;
        display: flex;
        align-items: baseline;
        justify-content: flex-start;
        flex-wrap: wrap;
        &:nth-child(6) {
          margin-top: 50px;
        }
        &:nth-child(9) {
          margin-top: 50px;
        }
        .item-label {
          display: flex;
          justify-content: space-between;
          width: 100px;
          color: #a3bedd;
          margin-right: 20px;
        }
        .item-value {
          color: #FFF;
          flex: 1;
          &.location-text {
            height: 80px;
          }
          .people-phone {
            margin-left: 20px;
          }
        }
      }
    }
    .last-time {
      width: 100%;
      height: 70px;
      margin-top: 60px;
      background: rgba(8, 149, 220, 0.2);
      line-height: 70px;
      font-size: 18px;
      color: #a3bedd;
      text-align: center;
      position: relative;
      span {
        color: #ffffff;
        margin-left: 20px;
        &::before {
          content: "";
          width: 6px;
          height: 6px;
          border-bottom: 1px solid #6da7f6;
          border-left: 1px solid #6da7f6;
          position: absolute;
          left: 0;
          bottom: 0;
        }
        &::after {
          content: "";
          width: 6px;
          height: 6px;
          border-right: 1px solid #6da7f6;
          border-top: 1px solid #6da7f6;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
      &::before {
        content: "";
        width: 6px;
        height: 6px;
        border-top: 1px solid #6da7f6;
        border-left: 1px solid #6da7f6;
        position: absolute;
        left: 0;
        top: 0;
      }
      &::after {
        content: "";
        width: 6px;
        height: 6px;
        border-right: 1px solid #6da7f6;
        border-bottom: 1px solid #6da7f6;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
  .device-info-items {
    height: 15%;
    margin-top: 10px;
    ul {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      li {
        flex: 1;
        border: 1px solid rgba(32,165,244,.3);
        border-radius: 4px;
        padding-top: 30px;
        height: 100%;
        text-align: center;
        align-items: center;
        flex-direction: column;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        &:nth-child(2) {
          margin: 0 20px;
        }
        .link-icon {
          display: block;
          width: 60px;
          height: 50px;
          object-fit: contain;
        }
        .link-name {
          margin-top: 15px;
          color: #A3BEDD;
          height: 50%;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
